<script lang="ts">
import { getRouterList } from "@/api/route";
import route from "@/assets/route.json";
import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: "home",
  setup() {
    const startInfo = reactive({
      x: 0,
      y: 0,
      top: 0,
      left: 0,
    });
    console.log(route);
    /** 是否移动 */
    let moving = false;
    /** 鼠标移动 */
    const onMousedown = (event: MouseEvent) => {
      event.preventDefault();
      // console.log(event);
      startInfo.x = event.clientX;
      startInfo.y = event.clientY;
      toggleMoving(true);
    };
    /** 移动总事件 */
    const toggleMoving = (movable: boolean) => {
      if (movable) {
        document.addEventListener("mousemove", onMouseMove);
        document.addEventListener("mouseup", onMouseUp);
      } else {
        document.removeEventListener("mousemove", onMouseMove);
        document.removeEventListener("mouseup", onMouseUp);
      }
    };
    /** 移动事件 */
    const onMouseMove = (event: MouseEvent) => {
      event.preventDefault();
      // console.log(event);
      moving = true;
      console.log(event.clientX - startInfo.x);
      console.log(event.clientY - startInfo.y);
      startInfo.top = event.clientY - startInfo.y;
      startInfo.left = event.clientX - startInfo.x;
    };
    /** 鼠标抬起事件 */
    const onMouseUp = (event: MouseEvent) => {
      event.preventDefault();
      console.log(event);
      toggleMoving(false);
      if (moving) {
        moving = false;
      }
    };
    const onClick = async () => {
      const a = await getRouterList();
      console.log(a);
    };
    return {
      startInfo,
      onMousedown,
      onClick,
    };
  },
});
</script>
<template>
  <div class="home">
    <el-button @click="onClick">获取routes</el-button>
    <div class="home-BOX home1" @mousedown="onMousedown">home</div>
    <div
      class="home-BOX home2"
      @mousedown="onMousedown"
      :style="{ left: startInfo.left + 'px', top: startInfo.top + 'px' }"
    >
      home
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  // position: relative;
  .home-BOX {
    margin: 10px;
    height: 100px;
    width: 100px;
    cursor: pointer;
  }
  .home1 {
    background: seagreen;
  }
  .home2 {
    position: relative;
    background: rgb(109, 20, 224);
  }
}
</style>
